Meteor একটি Full-Stack JavaScript framework, যা খুব দ্রুত এবং সহজে রিয়েল-টাইম অ্যাপ্লিকেশন তৈরি করতে সাহায্য করে। এর publish/subscribe মেকানিজম এবং realtime data syncing ফিচারটি একটি চ্যাট অ্যাপ্লিকেশন তৈরির জন্য আদর্শ। এখানে আমরা Meteor ব্যবহার করে একটি real-time chat app তৈরি করার পুরো প্রক্রিয়া আলোচনা করব।
ধাপ ১: Meteor প্রজেক্ট তৈরি করা
প্রথমে Meteor ইনস্টল করতে হবে (যদি না করে থাকেন):
curl https://install.meteor.com/ | sh
এরপর, একটি নতুন Meteor অ্যাপ্লিকেশন তৈরি করুন:
meteor create real-time-chat
cd real-time-chat
ধাপ ২: ডিপেনডেন্সি ইনস্টল করা
এখন, আমাদের চ্যাট অ্যাপ্লিকেশনের জন্য Meteor's Accounts প্যাকেজ ব্যবহার করতে হবে যাতে ইউজার লগইন ফিচার যোগ করা যায়।
meteor add accounts-base accounts-ui
এছাড়া, চ্যাটের ডেটা সংরক্ষণ করতে MongoDB এবং Simple Schema ব্যবহার করা হবে।
meteor add mongo
meteor add aldeed:simple-schema
ধাপ ৩: MongoDB কলেকশন তৈরি করা
এখন একটি Messages কলেকশন তৈরি করতে হবে, যেখানে আমরা চ্যাটের বার্তা সঞ্চয় করব।
/imports/api/messages.js
import { Mongo } from 'meteor/mongo';
import SimpleSchema from 'simpl-schema';
export const Messages = new Mongo.Collection('messages');
// Messages schema
Messages.schema = new SimpleSchema({
text: {
type: String,
label: 'Message Text'
},
createdAt: {
type: Date,
label: 'Created At',
defaultValue: new Date(),
},
userId: {
type: String,
label: 'User Id'
},
username: {
type: String,
label: 'Username'
}
});
Messages.attachSchema(Messages.schema);
এই কোডে আমরা একটি Messages কলেকশন তৈরি করেছি যা চ্যাটের বার্তা, বার্তার সময় এবং ব্যবহারকারীর তথ্য সংরক্ষণ করবে।
ধাপ ৪: Messages পুশ করা এবং সাবস্ক্রাইব করা
Publish এবং Subscribe মেকানিজম ব্যবহার করে রিয়েল-টাইম ডেটা সিঙ্ক্রোনাইজেশন করতে হবে।
/imports/api/publications.js
import { Messages } from './messages';
// Publish messages to clients
Meteor.publish('messages', function () {
return Messages.find();
});
এখানে messages পাবলিশ করা হচ্ছে, যাতে ক্লায়েন্ট সেই ডেটা সাবস্ক্রাইব করতে পারে।
/client/main.js
import { Meteor } from 'meteor/meteor';
import { Messages } from '../imports/api/messages';
// Subscribe to messages
Meteor.subscribe('messages');
এখানে আমরা ক্লায়েন্টে messages পাবলিকেশন সাবস্ক্রাইব করছি।
ধাপ ৫: UI তৈরি করা
এখন, আমরা একটি সহজ UI তৈরি করব যাতে ব্যবহারকারীরা বার্তা পাঠাতে এবং চ্যাট দেখতে পারে।
/client/main.html
<head>
<title>Real-Time Chat App</title>
</head>
<body>
<h1>Welcome to the Real-Time Chat App</h1>
{{> loginButtons}}
<div>
<h2>Messages:</h2>
<ul>
{{#each messages}}
<li>{{username}}: {{text}}</li>
{{/each}}
</ul>
</div>
<form class="new-message">
<input type="text" name="text" placeholder="Type your message here..." required>
<button type="submit">Send</button>
</form>
</body>
<template name="loginButtons"></template>
<template name="main">
<h1>Welcome to the chat app!</h1>
{{> loginButtons}}
</template>
এখানে loginButtons ব্যবহারকারীদের লগইন এবং সাইনআপ করার জন্য UI দেখাবে। এছাড়া, messages আউটপুট করতে একটি ul ট্যাগ এবং চ্যাট বার্তা পাঠানোর জন্য একটি ফর্ম তৈরি করা হয়েছে।
ধাপ ৬: বার্তা পাঠানো
ব্যবহারকারীদের বার্তা পাঠানোর জন্য, submit ইভেন্ট হ্যান্ডলিং করা হবে।
/client/main.js
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { Messages } from '../imports/api/messages.js';
import './main.html';
Template.main.helpers({
messages() {
return Messages.find({}, { sort: { createdAt: -1 } });
}
});
Template.main.events({
'submit .new-message'(event) {
event.preventDefault();
const text = event.target.text.value;
const username = Meteor.user() ? Meteor.user().username : 'Guest';
// Insert new message into Messages collection
Messages.insert({
text,
createdAt: new Date(),
userId: Meteor.userId(),
username
});
// Clear input field
event.target.text.value = '';
}
});
এখানে, যখন submit ইভেন্ট ঘটে, তখন Messages.insert() ফাংশন ব্যবহার করে নতুন বার্তা Messages কলেকশনে যোগ করা হয়।
ধাপ ৭: ব্যবহারকারী লগইন এবং লগআউট ফিচার
loginButtons টেমপ্লেটটি ব্যবহারকারীর লগইন এবং লগআউট ফিচার প্রদর্শন করবে।
/client/login-buttons.html
<template name="loginButtons">
{{#if currentUser}}
<button class="logout" onClick="Meteor.logout()">Logout</button>
{{else}}
<button class="login" onClick="Meteor.loginWithGoogle()">Login with Google</button>
{{/if}}
</template>
এখানে, ব্যবহারকারীদের Google একাউন্ট দিয়ে লগইন বা লগআউট করার অপশন দেওয়া হয়েছে।
ধাপ ৮: অ্যাপ্লিকেশন চালানো
এখন, আপনার Meteor অ্যাপ চালাতে:
meteor run
এখন আপনি http://localhost:3000 এ আপনার রিয়েল-টাইম চ্যাট অ্যাপ দেখতে পারবেন।
সারাংশ
Meteor দিয়ে একটি Real-Time Chat App তৈরি করার জন্য আপনি MongoDB, Publish/Subscribe, এবং Accounts প্যাকেজ ব্যবহার করেছেন। এই অ্যাপটি রিয়েল-টাইম চ্যাট সিস্টেমের জন্য উন্নত করা হয়েছে, যেখানে ব্যবহারকারীরা লগইন করে বার্তা পাঠাতে এবং দেখতে পারেন। Meteor এর শক্তিশালী রিয়েল-টাইম ফিচার এবং সহজ সেটআপের মাধ্যমে চ্যাট অ্যাপ তৈরি করা খুবই সহজ।
Read more
